<template>
	<view>
		<view class="handover-view" @click="detailClick">
			<view style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="title">
					{{record.situation}}
				</view>
				<view class="link">
					详情
				</view>
			</view>
			<view v-for="(item,index) in record.medicines" class="item">
				<view class="name">
					{{formatName(item)}}
				</view>
				<view class="content">
					<view v-for="(time, timeIndex) in daytimeList(item)">
						用药时间:{{formatTime(time)}}
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="right" width="500rpx">
			<div class="detail">
				<div class="title">症状</div>
				<div class="content">
					{{ record.situation }}
				</div>
				
				<div class="title">托药列表</div>
				<div class="content">
					<div v-for="(item, index) in record.medicines" :key="index" class="medicines">
						<div class="info">
							{{ item.name }} | {{ item.way }} | {{ item.dailyTimes }}次 |
							每次{{ item.quotaPerTime }}{{ item.unit }}
						</div>
						<div class="info">
							<view v-for="time in item.daytimeList.split('|')">
								{{time}}
							</view>
						</div>
						<div class="info">
							{{ item.remark }}
						</div>
						<div v-if="item.image" class="info">
							<div v-for="(image, iIndex) in item.image.split('|')" :key="iIndex">
								<u-image :src="image" width="90rpx" height="90rpx"></u-image>
							</div>
						</div>
					</div>
				</div>
				
				<div v-if="record.adviceImg">
					<div class="title">医嘱照片</div>
					<div class="content">
						<div v-for="(image, iIndex) in record.adviceImg.split('|')" :key="iIndex">
							<u-image :src="image" width="90rpx" height="90rpx"></u-image>
						</div>
					</div>
				</div>
				
				<div v-if="record.attorneyImg">
					<div v-if="record.adviceImg" class="title">委托照片</div>
					<div class="content">
						<div v-for="(image, iIndex) in record.attorneyImg.split('|')" :key="iIndex">
							<u-image :src="image" width="90rpx" height="90rpx"></u-image>
						</div>
					</div>
				</div>
				
				<div v-if="record.assignImg">
					<div class="title">委托签名</div>
					<div class="content">
						<div v-for="(image, iIndex) in record.assignImg.split('|')" :key="iIndex">
							<u-image :src="image" width="90rpx" height="90rpx"></u-image>
						</div>
					</div>
				</div>
				
			</div>
		</u-popup>
	</view>

</template>

<script>
	import {
		formatDateByTimestamp
	} from '@/utils/utils.js'
	export default {
		name: "Handover",
		props: {
			record: {
				type: Object,
				default () {
					return null;
				}
			}
		},
		data() {
			return {
				show: false
			};
		},
		methods: {
			formatTime(eventTime) {
				return formatDateByTimestamp(eventTime, 'hh:MM');
			},

			formatName(item) {
				return item.name;
			},

			daytimeList(item) {
				let list = item.daytimeList.split('|');
				return list;
			},

			detailClick() {
				console.log(this.record);
				this.show = true;
				// this.$u.route({
				// 	url: 'pages_sub/record/handover-detail-page',
				// 	params: this.record.id
				// })
			}
		}
	}
</script>

<style lang="scss">
	.handover-view {
		padding: 30rpx;

		.title {
			color: $app-font-color;
		}
		
		.link{
			color: $app-check-color;
		}

		.item {

			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 20rpx;
			margin-bottom: 10rpx;

			font-size: 24rpx;
			font-weight: 400;
			color: #333333;

			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			>.name {
				height: 68rpx;
				background: #FFFFFF;
				border: 1px solid #6E645A;
				border-radius: 34rpx;
				padding: 25rpx 30rpx 25rpx 30rpx;

				display: flex;
				justify-content: center;
				align-items: center;
			}

			.content {}
		}
	}

	.detail {
		padding: 30rpx;

		.title {
			font-size: 22px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 24px;
		}

		.content {
			margin-top: 10px;
			margin-bottom: 30px;

			font-size: 15px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #6E645A;
			line-height: 24px;
		}

		.medicines {

			.info {
				margin-top: 5px;
			}
		}
	}
</style>
